<template>
<div id="login">
    <div>
      <van-nav-bar title="校易宝" left-arrow  @click-left="onClickLeft"/> 
    </div>
<!--登录界面-->
<div align="center" style="position:relative; top:30px" class="login-wrap" v-show="showLogin">
      <div>
          <p>用户：{{userName}}</p>
      </div>
      <div>
          <van-cell-group>
            <van-field
                id="userName"
                v-model="userName"
                label="用户名"
                placeholder="请输入用户名"
                required
            />

            <van-field
                id="passWord"
                v-model="passWord"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
            />
        </van-cell-group>
      </div>
      <div style="position:relative; top:20px ; margin:20px">
        <van-button type="primary" size="large" @click="login">登  录</van-button>
      </div>
      <div align="center" style="position:relative; top:20px ; margin:20px">
        <span @click="ToRegister" style="margin:20px">注册用户</span>
        <span>|</span>
        <span @click="ToFindPSW" style="margin:20px">忘记密码？</span>
      </div>
</div>
<!--注册界面-->
<div align="center" style="position:relative; top:30px" class="register-wrap" v-show="showRegister">
      <div>
          <p>用户：{{newUsername}}</p>
      </div>
      <div>
          <van-cell-group>
            <van-field
                id="newUsername"
                v-model="newUsername"
                label="用户名"
                placeholder="请输入用户名"
                required
            />

            <van-field
                id="newPassword"
                v-model="newPassword"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
            />
        </van-cell-group>
      </div>
      <div style="position:relative; top:20px ; margin:20px">
        <van-button type="danger" size="large" @click="register">注  册</van-button>
      </div>
      <div align="center" style="position:relative; top:20px ; margin:20px">
        <span @click="ToLogin" style="margin:20px">登录账号</span>
        <span>|</span>
        <span @click="ToFindPSW" style="margin:20px">忘记密码？</span>
      </div>
</div>
</div>
</template>
<script>
import { Dialog } from 'vant';  //信息提示
import { Toast } from 'vant';
import axios from "axios";
export default {
    data(){
         return{
                userName:'',
                passWord:'',
                newUsername:'',
                newPassword:'',
                showLogin: true,
                showRegister: false,
        }
    },
    methods:{
        //返回
        onClickLeft() {
        this.$router.go(-1)
        },
        //忘记密码
       ToFindPSW(){this.$router.push('/findPsw')},  
        //show注册界面
        ToRegister(){
            this.userName = '';
            this.passWore = '';
            this.showRegister = true;
            this.showLogin = false;
        },
        //show登录界面
        ToLogin(){
            this.newUsername = '',
            this.newPassword = '',
            this.showRegister = false;
            this.showLogin = true;
        },
        //登录功能
        login(){
                if (this.userName == null || this.userName == "") {
                   Dialog.alert({
                        message: '用户名不能为空！'
                        }).then(() => {
                        // on close
                        });
                }
                else if (this.passWord == null || this.passWord == "") {
                    Dialog.alert({
                        message: '密码不能为空！'
                        }).then(() => {
                        // on close
                        });
                }else {
                     axios({
                        method: "post",
                        url: "http://localhost:3000/login",
                        data: {
                        uName: this.userName,
                        psw: this.passWord,
                        },
                        headers: {
                        "Content-Type": "text/plain"
                        }
                    }).then(result => {
                        console.log(result);
                        if(result.data=="登录成功"+this.userName){
                            window.localStorage.setItem("userName",this.userName)
                            Toast.success('登录成功');
                            this.$store.commit('Deal');
                            this.$store.commit('login')
                            this.$router.push('/person')  
                        }else if(result.data=="密码错误"){
                            Dialog.alert({
                            message: "密码错误！"
                            }).then(() => {
                            // on close
                            })
                        }else if(result.data=="用户不存在"){
                            Dialog.alert({
                            message: "用户不存在！"
                            }).then(() => {
                            // on close
                            })
                        }
                    });                                                      
                }
            },
        //注册功能
        register(){
            if(this.newUsername == null || this.newUsername == ""||this.newPassword == null || this.newPassword == ""){
                Dialog.alert({
                        message: '用户名和密码不能为空！'
                        }).then(() => {
                        // on close
                        });
            }else if(this.newUsername.match(/[^A-Za-z0-9]/ig)||this.newPassword.match(/[^A-Za-z0-9]/ig)){
                Dialog.alert({
                        message: "用户名和密码必须为数字和字母！"
                        }).then(() => {
                        // on close
                        });
            }else{
                axios({
                    method:"post",
                    url:"http://localhost:3000/register",
                    data:{
                        uName: this.newUsername,
                        psw: this.newPassword,
                    },
                    headers:{
                        "Content-Type": "text/plain"
                    }
                }).then(result =>{
                    console.log(result);
                    if(result.data=="注册成功"){
                         Dialog.alert({
                            message: '注册成功! 尽快完善个人信息!'
                            }).then(() => {
                                this.newUsername = '',
                                this.newPassword = '',
                                this.showRegister = false;
                                this.showLogin = true;
                            });                      
                    }else if(result.data=="用户已存在"){
                        Dialog.alert({
                        message: "用户已存在！"
                        }).then(() => {
                        // on close
                        });
                    }
                })
              }         
            }
    }
}
</script>
<style>
#login span:hover{color:#41b877;}
</style>
